<!--营业概况-->
<template>
  <div>
    <el-container>
      <el-header>
        <el-button class="export-btn  float-left" type="primary" round>{{lang._011}}</el-button>
        <!-- 导出按钮 -->
        <div class="header-right">
          <el-date-picker class="dataTime float-left" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="|"
            start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">
          </el-date-picker>
          <el-button class="float-left search-btn" type="primary" round>{{lang._012}}</el-button>
          <!-- 时间选择 -->
        </div>
      </el-header>
      <el-main>
        <el-table class="text-center tables" :data="tableData" stripe header-cell-style="background:#edf5ff;color:#409eff;text-align:center;">
          <el-table-column prop="operating" :label="lang._028" width="202">
              <template slot-scope="scope">
              <el-button type="text" width="101px">{{lang._041}}</el-button>
              <el-button type="text" width="101px">{{lang._042}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="srartTime" :label="lang._020" width="270">
          </el-table-column>
          <el-table-column prop="endTime" :label="lang._021" width="270">
          </el-table-column>
          <el-table-column prop="cashier" :label="lang._032" width="104">
          </el-table-column>
          <el-table-column prop="totalAmount" :label="lang._023" width="206">
          </el-table-column>
          <el-table-column prop="payment1" :label="lang._014" width="207">
          </el-table-column>
          <el-table-column prop="actualAmount" :label="lang._036" width="207">
          </el-table-column>
          <el-table-column prop="profit" :label="lang._037" width="207">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

  </div>
</template>
<style lang="less" scoped>
  .export-btn {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .header-right {
    position: absolute;
    z-index: 2;
    right: 0;
    height: 60px;

    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 14px 0 0 14px;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }

  }

</style>
<style>
  .el-tabs__header {
    height: 60px;
    margin: 0;
    background: #FFF;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
    border: none;
    color: #409eff;
    font-size: 15px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: none;
    border-left: none;
    margin-left: 20px;
    margin-right: 20px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    color: #FFF;
    background: #409eff;
    border-radius: 14px;
  }

  .el-tabs__content {
    height: calc(100vh - 61px - 80px);
    background: unset;
  }

  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

</style>
<style scoped>
  .el-header,
  .el-footer {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #F3F4F5;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

</style>


<script>
  export default {
    props: ['lang'],
    data() {
      return {
        activeName2: 'first',
        //初始的选择标签页
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        tableData: [{
          srartTime: '2017-12-03 13:55:49',
          endTime:'2017-12-03 23:55:49',
          cashier: '收银员1号',
          totalAmount: '6772.50',
          payment1: '156.00',
          actualAmount: '1550.00',
          profit:'1550.00'
        },{
          srartTime: '2017-12-03 13:55:49',
          endTime:'2017-12-03 23:55:49',
          cashier: '收银员1号',
          totalAmount: '6772.50',
          payment1: '156.00',
          actualAmount: '1550.00',
          profit:'1550.00'
        },{
          srartTime: '2017-12-03 13:55:49',
          endTime:'2017-12-03 23:55:49',
          cashier: '收银员1号',
          totalAmount: '6772.50',
          payment1: '156.00',
          actualAmount: '1550.00',
          profit:'1550.00'
        },{
          srartTime: '2017-12-03 13:55:49',
          endTime:'2017-12-03 23:55:49',
          cashier: '收银员1号',
          totalAmount: '6772.50',
          payment1: '156.00',
          actualAmount: '1550.00',
          profit:'1550.00'
        },{
          srartTime: '2017-12-03 13:55:49',
          endTime:'2017-12-03 23:55:49',
          cashier: '收银员1号',
          totalAmount: '6772.50',
          payment1: '156.00',
          actualAmount: '1550.00',
          profit:'1550.00'
        },]
        // 表格内容
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
